import { useState, FC } from 'react';
import styles from '../common/index.module.scss';
import { useRequest, useTitle } from 'ahooks';
import { Empty, Table, Typography, Tag, Button, Space, Modal, message, Spin } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import ListSearch from '../../../components/ListSearch';
import useLoadQuestionListData from '../../../hooks/useLoadQuestionListData';
import ListPage from '../../../components/ListPage';
import { updateQuestionService, deleteQuestionService } from '../../../services/question';
const Trash: FC = () => {
  useTitle('小慕问卷 - 回收问卷');
  const { loading, data = {}, refresh } = useLoadQuestionListData({ isStar: true });
  const { list = [], total = 0 } = data;
  console.log('list', list);
  console.log('total', total);
  const { Title } = Typography;
  const columns = [
    {
      title: '标题',
      dataIndex: 'title',
    },
    {
      title: '是否发布',
      dataIndex: 'isPublished',
      render: (isPublished: boolean) => {
        return isPublished ? <Tag color="processing">已发布</Tag> : <Tag>未发布</Tag>;
      },
    },
    {
      title: '答卷',
      dataIndex: 'answerCount',
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
    },
  ];
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const { confirm } = Modal;
  const { run: recover } = useRequest(
    async () => {
      for await (const id of selectedIds) {
        await updateQuestionService(id, { isDeleted: false });
      }
    },
    {
      manual: true,
      debounceWait: 500,
      onSuccess: () => {
        refresh();
        message.success('恢复成功');
        setSelectedIds([]);
      },
    },
  );

  const { run: batchDelete } = useRequest(
    async () => {
      const data = await deleteQuestionService(selectedIds);
      return data;
    },
    {
      manual: true,
      debounceWait: 500,
      onSuccess: () => {
        message.success('删除成功');
        refresh();
        setSelectedIds([]);
      },
    },
  );
  const TableElement = (
    <>
      <div style={{ marginBottom: '16px' }}>
        <Space>
          <Button type="primary" disabled={selectedIds.length === 0} onClick={recover}>
            恢复
          </Button>
          <Button
            danger
            disabled={selectedIds.length === 0}
            onClick={() => {
              confirm({
                title: '确定彻底删除该问卷吗?',
                icon: <ExclamationCircleOutlined />,
                okText: '确定',
                cancelText: '取消',
                onOk: () => {
                  batchDelete();
                },
              });
            }}
          >
            删除
          </Button>
        </Space>
      </div>
      <Table
        dataSource={list}
        columns={columns}
        pagination={false}
        rowKey={(q) => q.id}
        rowSelection={{
          type: 'checkbox',
          onChange: (selectedRowKeys) => {
            setSelectedIds(selectedRowKeys as string[]);
          },
        }}
      />
    </>
  );
  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>星标问卷</Title>
        </div>
        <div className={styles.right}>
          <ListSearch />
        </div>
      </div>
      <div className={styles.content}>
        {loading && (
          <div style={{ textAlign: 'center' }}>
            <Spin />
          </div>
        )}
        {!loading && list.length === 0 && <Empty description="暂无数据" />}
        {list.length > 0 && TableElement}
      </div>
      <div className={styles.footer}>
        <ListPage total={total} />
      </div>
    </>
  );
};
export default Trash;
